<template>
	<view class="content">
    <view class="search">
      <uni-search-bar placeholder="请输入搜索关键词" @confirm="search" cancelButton="none" radius="28">
        <template v-slot:searchIcon>
          <text class="iconfont icon-fangdajing" style="font-size: 36rpx;"></text>
        </template>
      </uni-search-bar>
      <view class="u-p-l-32 u-p-r-32">
        <view class="u-p-t-32 u-p-b-32" @click="dropdownShow = true">
          地区&分类
        <u-icon name="arrow-down" size="24" style="margin-left: 10rpx;"></u-icon>
        </view>
      </view>
    </view>
    <view>
      <view style="height: 212rpx;"></view>  
      <view class="u-p-32 product-item">
        <view class="scroll-product-item_H" v-for="(item,index) in 12" :key="index">
          <view class="scroll-product-img_H" @click="ProductDetail">
            <image src="/static/image/main.png" mode="scaleToFill" class="scroll-img"></image>
          </view>
          <view class="scroll-product-text_H">
            <view>活动商品软件服务信息技术开发</view>
            <view class="u-flex">
              <view class="u-flex-1">￥<text class="product-price">98</text>起</view>
              <view class="scroll-product-img" @click="specificationShow = true">
                <text class="iconfont icon-gouwuche scroll-product-img__icon"></text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view style="height: 100rpx;"></view>  
    </view>
    <view class="shop-btn">
      <view class="shop-btn_l" @click="ShoppingCart">
        <view class="shop-btn_img">
          <text class="iconfont icon-gouwuche shop-btn_icon"></text>
          <u-badge type="error" count="7" :offset="[-12,-20]" class="shop-badge"></u-badge>
        </view>
      </view>
      <view class="shop-btn_r signup" @click="OrderNow">立即下单</view>
    </view>
    <Specification 
      v-model="specificationShow" 
      mode="center" 
      width="80%" 
      :closeable="true" 
      close-icon-pos="center"
      :mask-close-able="false"
      :list="list">
    </Specification>
    <u-popup v-model="dropdownShow" mode="top">
      <view class="slot-content">
        <view class=""><text>选择地区</text></view>
      	<view class="item-box">
      		<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)" v-for="(item, index) in area" :key="index">
      			{{item.label}}
      		</view>
      	</view>
      </view>
      <view class="slot-content">
        <view class=""><text>选择分类</text></view>
      	<view class="item-box">
      		<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick1(index)" v-for="(item, index) in sort" :key="index">
      			{{item.label}}
      		</view>
      	</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import Specification from '@/components/Specification/Specification.vue';
	export default {
    components:{
    	Specification,
    },
		data() {
			return {
        area: [{
        		label: '地区1',
        		active: true,
        	},
        	{
        		label: '地区2',
        		active: false,
        	},
        	{
        		label: '地区3',
        		active: false,
        	},
        	{
        		label: '地区4',
        		active: false,
        	},
          {
          	label: '地区5',
          	active: false,
          },
          {
          	label: '地区6',
          	active: false,
          },
        ],
        sort: [{
        		label: '分类1',
        		active: true,
        	},
        	{
        		label: '分类2',
        		active: false,
        	},
        	{
        		label: '分类3',
        		active: false,
        	},
        	{
        		label: '分类4',
        		active: false,
        	},
        ],
        list: [{
        		label: '规格1',
        		active: true,
        	},
        	{
        		label: '规格2',
        		active: false,
        	},
        ],
        specificationShow:false,
        dropdownShow:false,
      }
		},
		onLoad() {

		},
		methods: {
      tagClick(index) {
      	this.area[index].active = !this.area[index].active;
      },
      tagClick1(index) {
      	this.sort[index].active = !this.sort[index].active;
      },
      ProductDetail(){
        uni.navigateTo({
        	url: '/pages/Mall/ProductDetail/ProductDetail?Name=活动商品软件服务信息技术开发'
        });
      },
      OrderNow(){
        uni.navigateTo({
        	url: '/pages/Mall/OrderInfo/OrderInfo'
        });
      },
      ShoppingCart(){
        uni.navigateTo({
        	url: '/pages/Mall/ShoppingCart/ShoppingCart'
        });
      }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
    .home-img{
      width: 100%;
      height: 100%;
    }
    .search{
      background-color: #ffffff;
      width: 100%;
      position: fixed;
      z-index: 1;
    }
    .product-item{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    //商品 ---
    .scroll-product-item_H{
      width: calc((100% - 32rpx) / 2); // 这里的10px = (分布个数2-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
      min-width: calc((100% - 32rpx) / 2); // 加入这两个后每个item的宽度就生效了
      max-width: calc((100% - 32rpx) / 2); // 加入这两个后每个item的宽度就生效了
      height: 420rpx;
      border-radius: 28rpx;
      flex: 1;
      margin: 0 32rpx 32rpx 0;
      &:nth-child(2n) {// 去除第2n个的margin-right
        margin-right: 0;
      }
      .scroll-product-img_H{
        width: 100%;
        height: 264rpx;
        min-height: 264rpx;
      }
      .scroll-img{
        width: 100%;
        height: 100%;
        border-top-left-radius: 28rpx;
        border-top-right-radius: 28rpx;
      }
      .scroll-product-text_H{
        height: 159rpx;
        padding: 16rpx 24rpx;
        border-bottom-left-radius: 28rpx;
        border-bottom-right-radius: 28rpx;
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
        .product-price{
          font-size: 44rpx;
          padding: 0 10rpx;
        }
        .scroll-product-img{
          width: 56rpx;
          height: 56rpx;
          border-radius: 50rpx;
          background-color: #fed500;
          display: flex;
          align-items: center;
          justify-content: center;
          .scroll-product-img__icon{
            font-size: 36rpx;
          }
        }
      }
    }
    //商品 ---
	}
</style>
